<template>
  <div style="margin:20px auto;height:853px;background:#fff;width:1200px;padding:0 20px">
     <div class="head">
      <a href="javascript:;" @click="goBack" style="font-size:14px">
        <i class="el-icon-arrow-left"></i>返回
      </a>
       <h2>参与讨论的vue在manageTrainee.vue文件当中</h2>
    </div>
<!--    <div class="search">-->
<!--      <div>-->
<!--        <span>班级名称:</span>-->
<!--        <el-select-->
<!--          size="mini"-->
<!--          style="width:170px"-->
<!--          clearable-->
<!--          filterable-->
<!--          remote-->
<!--          reserve-keyword-->
<!--          v-model="query.classId"-->
<!--          :remote-method="remoteMethodClass"-->
<!--          @select="handleSelectClass"-->
<!--          :loading="loading"-->
<!--        >-->
<!--          <el-option-->
<!--            v-for="item in classList"-->
<!--            :key="item.id"-->
<!--            :label="item.className"-->
<!--            :value="item.id"-->
<!--          ></el-option>-->
<!--        </el-select>-->
<!--      </div>-->
<!--      <div>-->
<!--        <span>课程名称:</span>-->
<!--        <el-select-->
<!--          size="mini"-->
<!--          style="width:170px"-->
<!--          clearable-->
<!--          filterable-->
<!--          remote-->
<!--          reserve-keyword-->
<!--          v-model="query.courseId"-->
<!--          :remote-method="remoteMethodCourse"-->
<!--          @select="handleSelectCourse"-->
<!--          :loading="loading"-->
<!--        >-->
<!--          <el-option-->
<!--            v-for="item in courseList"-->
<!--            :key="item.id"-->
<!--            :label="item.courseName"-->
<!--            :value="item.id"-->
<!--          ></el-option>-->
<!--        </el-select>-->
<!--      </div>-->
<!--      <div>-->
<!--        <span>试卷名称:</span>-->
<!--        <el-select-->
<!--          size="mini"-->
<!--          style="width:170px"-->
<!--          clearable-->
<!--          filterable-->
<!--          remote-->
<!--          reserve-keyword-->
<!--          v-model="query.examPaperId"-->
<!--          :remote-method="remoteMethodPage"-->
<!--          @select="handleSelectPage"-->
<!--          :loading="loading"-->
<!--        >-->
<!--          <el-option v-for="item in pageList" :key="item.id" :label="item.name" :value="item.id"></el-option>-->
<!--        </el-select>-->
<!--      </div>-->
<!--      <el-button type="primary" size="mini" @click="currentChange(1)">查询</el-button>-->
<!--    </div>-->
<!--    <div class="table">-->
<!--      <el-table-->
<!--        :data="tableData"-->
<!--        style="width: 100%;height:100%:font-size:18px"-->
<!--        height="100%"-->
<!--        row-class-name="body-font"-->
<!--        header-row-class-name="header-bg"-->
<!--      >-->
<!--        <el-table-column prop="classId" label="序号" width="60" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{ 15 * (query.pageIndex - 1) + scope.$index + 1 }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="className" label="班级名称" width="300" align="center"></el-table-column>-->
<!--        <el-table-column prop="courseName" label="课程名称" align="center"></el-table-column>-->
<!--        <el-table-column prop="examPaperName" label="试卷名称" align="center"></el-table-column>-->
<!--        <el-table-column prop="createTime" label="考试时间" align="center"></el-table-column>-->
<!--        <el-table-column prop="address" label="操作" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button type="text" @click="goDetail(scope.row)">查看统计</el-button>-->

<!--          </template>-->
<!--        </el-table-column>-->
<!--      </el-table>-->
<!--    </div>-->
<!--    <div class="pager">-->
<!--      <el-pagination-->
<!--        background-->
<!--        layout="prev, pager, next"-->
<!--        :total="total"-->
<!--        :page-size="15"-->
<!--        @current-change="currentChange"-->
<!--      ></el-pagination>-->
<!--    </div>-->


    <!-- <div class="menu">
      <div class="menu-item">
        <i class="iconfont icon-user2"></i> 学员管理
      </div>
      <div class="sub-menu">
        <div
          class="menu-item"
          :class="{'active':routerPath.indexOf('/manageTrainee/student/attendance') != -1}"
        >
          <router-link
            to="/manageTrainee/student/attendance"
            style="display:block;margin-left:-50px;padding-left:50px"
          >
            <i class="iconfont icon-pencil"></i> 学员签到
          </router-link>
        </div>
        <div
          class="menu-item"
          :class="{'active':routerPath.indexOf('/manageTrainee/student/score') != -1}"
        >
          <router-link
            to="/manageTrainee/student/score"
            style="display:block;margin-left:-50px;padding-left:50px"
          >
            <i class="iconfont icon-streamlist"></i> 成绩排行
          </router-link>
        </div>
        <div
          class="menu-item"
          :class="{'active':routerPath.indexOf('/manageTrainee/student/oneScore') != -1}"
        >
          <router-link
            to="/manageTrainee/student/oneScore"
            style="display:block;margin-left:-50px;padding-left:50px"
          >
            <i class="iconfont icon-search"></i> 成绩查询
          </router-link>
        </div>
      </div>
    </div>
    <div class="view">
      <router-view></router-view>
    </div>-->
  </div>
</template>
<script>
import { queryCourseByTypeAndName } from "@/api/course";
import {
  classSysList,
  pageSysList,
  courseSysList,
  CCPSysList,
} from "@/api/system";
export default {
  name: "cache",
  data() {
    return {
      routerPath: "",
      oldPath: "",
      total: 0,
      tableData: [],
      query: {
        pageIndex: 1,
        pageSize: 15,
        courseId: "",
        classId: "",
        examPaperId: "",
      },
      selData: {
        course: {},
        class: {},
        page: {},
      },
      loading: false,
      classList: [],
      courseList: [],
      pageList: [],
    };
  },
  methods: {
     goBack() {
      this.$router.goBack();
    },
    remoteMethodCourse(queryString) {
      this.loading = true;
      courseSysList({
        courseName: queryString || "",
        pageIndex: 1,
        pageSize: 20,
      })
        .then((res) => {
          this.loading = false;
          if (res.code == 1) {
            this.courseList = res.response.list;
          }
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    handleSelectCourse(id) {},
    remoteMethodClass(queryString) {
      this.loading = true;
      classSysList({
        className: queryString || "",
        pageIndex: 1,
        pageSize: 20,
      })
        .then((res) => {
          this.loading = false;
          if (res.code == 1) {
            this.classList = res.response.list;
          }
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    handleSelectClass(id) {},
    remoteMethodPage(queryString) {
      this.loading = true;
      pageSysList({
        name: queryString || "",
        pageIndex: 1,
        pageSize: 20,
      })
        .then((res) => {
          this.loading = false;
          if (res.code == 1) {
            this.pageList = res.response.list;
          } else {
          }
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    handleSelectPage(id) {},
    //数据统计
    goDetail(row) {
      this.$router.push({
        path: "/manageTrainee/statistics",
        query: row,
      });
    },
    currentChange(page) {
      this.query.pageIndex = page;
      this.getList();
    },
    getList() {
      this.query.classId = this.query.classId || null;
      this.query.courseId = this.query.courseId || null;
      this.query.examPaperId = this.query.examPaperId || null;
      CCPSysList(this.query).then((res) => {
        if (res.code == 1) {
          this.tableData = res.response.list;
          this.total = res.response.total;
        }
      });
    },
  },
  activated() {
    if (this.$route.query.pageId) {
      this.query.courseId = this.$route.query.courseId * 1 || null;
      this.query.classId = this.$route.query.classId * 1 || null;
      this.query.examPaperId = this.$route.query.pageId * 1 || null;
    }
    this.getList();
    this.routerPath = this.$route.fullPath;
    this.remoteMethodClass(this.$route.query.className || "");
    this.remoteMethodCourse(this.$route.query.courseName || "");
    this.remoteMethodPage(this.$route.query.pageName || "");
    // window.sessionStorage.setItem('oldPath',this.$route)
  },
  watch: {
    $route: {
      handler: function (newVal, oldVal) {
        this.routerPath = newVal.fullPath;
      },
      deep: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.menu {
  width: 220px;
  height: 100%;
  overflow: hidden;
  background-color: #dee6ec;
  float: left;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
}
.view {
  margin-left: 220px;
  height: 100%;
  overflow: hidden;
}
.menu-item {
  cursor: default;
  height: 45px;
  line-height: 45px;
  padding-left: 30px;
  font-size: 18px;
  i {
    font-size: 18px;
    color: #6c7277;
  }
}
.menu-item.active {
  background: #fff;
}
.sub-menu {
  .menu-item {
    padding-left: 50px;
    cursor: pointer;
  }
}
.search {
  height: 30px;
  padding: 10px;
  box-sizing: content-box;
  line-height: 30px;
  font-size: 14px;
  > div {
    display: inline-block;
    margin-right: 20px;
  }
}
.table {
  height: calc(100% - 127px);
}
.pager {
  height: 32px;
  box-sizing: content-box;
  padding: 20px 0;
  text-align: center;
}
.head {
  line-height: 30px;
  font-size: 18px;
  margin-bottom: 10px;
}
</style>
